<template>
	<view class="template-home tn-safe-area-inset-bottom" style="background-color: #f1f1f1;">

		<!-- 头部栏 -->
		<view class="cartHeadBatten">
			<!-- 顶部占位 -->
			<view :style="'height:' + sConf.tH + 'px;'"> </view>
			<!-- 城市 -->
			<view class="" style="display: flex;gap: 5px; padding: 10px 5px;">
				<tn-icon name="location" size="40" color="#fff" @click="EventLoadCity"></tn-icon>
				<picker mode='region' custom-item="全国通用" :value="curCity" @change="EventFilterCity">
					<view class="picker" style="color: #fff;">
						{{ curCity[1] }}
					</view>
				</picker>
			</view>
			<!-- 分类栏 -->
			<view>
				<tn-scroll-list :indicator="false">
					<view class="item-container">
						<template v-for="(mode, index) in moreData" :key="index">
							<view v-if="mode.parent === 0" class="scroll-item tn-flex-center tn-flex-column"
								@tap="moreChange(mode.id)">
								<view class="empty tn-grey-light_bg" :class="curMore === mode.id ? 'actMore' : ''">
									<image :src="sConf.pics + mode.face" mode="aspectFill" :lazy-load="true"></image>
								</view>
								<view class="mode-title" :class="curMore === mode.id ? 'mode-title-act' : ''">
									<text>{{ mode.name }}</text>
								</view>
							</view>
						</template>
					</view>
				</tn-scroll-list>
			</view>
		</view>



		<!-- 正文 -->
		<view class="cartSlBlock" style="padding: 10px 0 10px 0;display: flex;" :style="'height:' + topH + 'px;'">
			<scroll-view :scroll-top="0" scroll-y style="max-width: 20%;">
				<view class="tn-flex-column" style="background-color: #fff;">
					<view :class="curMode === 0 ? 'actModeTop' : ''" style="padding: 20px 10px;font-size: small;"
						@tap="modeChange(0)">热销</view>
					<template v-for="(mode, index) in moreData" :key="index">
						<view v-if="mode.parent === curMore" :class="curMode === mode.id ? 'actMode' : ''"
							style="padding: 20px 10px;font-size: small;" @tap="modeChange(mode.id)">
							{{ mode.name }}
						</view>
					</template>
				</view>
			</scroll-view>
			<scroll-view :scroll-top="0" scroll-y>
				<view class="tn-flex-column" style="background-color: #f1f1f1;padding: 0 5px 5px 5px;">
					<sub-product-card v-for="(product, index) in puctData" :key="index" :data="product" line cart
						@puctPlay="EventNavProduct"></sub-product-card>
					<tn-empty v-if="puctData.length === 0" mode="data"></tn-empty>
				</view>
			</scroll-view>
		</view>


		<!-- 顶部自定义导航 -->
		<tn-navbar :placeholder="true" fixed bg-color="#FFFFFF00" text-color="#fff">
			<tn-search-box v-model="curSearch" placeholder="请输入搜索内容" shape="round" :border="false"
				:search-button="false" size="sm" @search="searchChange"
				style="background-color: #f1f1f1;width: 100%;border-radius: 10px;margin: 0 5px;" />
			<template #back>
				<view style="display: flex;align-items: center;gap: 5px;">
					<tn-icon :name="sConf.logo" size='64' color="#fff" style="margin-left: 5px;"></tn-icon>
					<tn-badge :value="curMsg === 0 ? '' : curMsg" type="danger">
						<tn-icon name="paperbag" size="56" offset-top="-10" @click="toCartChange"></tn-icon>
					</tn-badge>
				</view>
			</template>
		</tn-navbar>
	</view>
</template>

<script>
	import utils from '@/common/utils';
	export default {
		data() {
			return {
				toTop: 100,
				topH: 0,
				title: ' • 重庆',
				sConf: getApp().globalData,
				curSearch: '',
				curMore: null,
				moreData: [],
				curMode: 0,
				modeData: null,
				puctData: [],
				curMsg: 0,
				curCity: ['全国通用', '全国通用', '全国通用']
			}
		},
		props: {
			bg: {
				type: String,
				default: '/media/background/default.png'
			},
			banner: {
				type: Array,
				default: ['/media/banner/default.png']
			}
		},
		methods: {
			async loadDefData() {
				console.log('初始化');
				await this.designLayout()
				await this.loadModeData()
				await this.loadShareHot(0)
			},
			designLayout() {
				console.log('计算窗口布局');
				this.$nextTick(() => {
					const query = uni.createSelectorQuery().in(this);
					query.select('.cartHeadBatten').boundingClientRect();
					query.select('.cartSlBlock').boundingClientRect();
					query.exec((res) => {
						console.log('cart窗口', this.sConf.iH, res[0].top, res[1].top);
						this.topH = this.sConf.iH - res[1].top - this.sConf.tH + 10;
					});
				})
			},
			searchNav() {
				console.log('searchNav');
				uni.navigateTo({
					url: '/pagec/search/search'
				})
			},
			searchChange(e) {
				console.log('搜索栏', e);
				uni.navigateTo({
					url: '/pagec/search/search?search=' + e
				})
			},
			toCartChange() {
				console.log('toCartChange');
				uni.navigateTo({
					url: '/pageb/puctcart/puctcart'
				});
			},
			moreChange(e) {
				console.log('大类变更', e);
				this.curMore = e;
				this.loadShareHot(0)
			},
			modeChange(e) {
				console.log('小类变更', e);
				this.curMode = e;
				this.loadShareHot(e)
			},
			puctChange(e) {
				console.log('产品选择', e);
				uni.navigateTo({
					url: '/pagec/product/product?gid=' + e
				});
			},
			EventNavProduct(e) {
				uni.navigateTo({
					url: '/pagec/product/product?gid=' + e
				});
			},
			EventFilterCity(e) {
				console.log('城市', e.detail.value);
				if (e.detail.value.includes('全国通用')) {
					this.curCity = ['全国通用', '全国通用', '全国通用']
				} else {
					this.curCity = e.detail.value
				}
			},
			EventLoadCity() {
				this.curCity = [this.sConf.city.province, this.sConf.city.city, this.sConf.city.district]
			},
			/**
			 * 加载分类数据
			 */
			loadModeData() {
				let host = this.sConf.host + '/weapps/modes/';
				let data = {
					status: 1,
					ordering: '-hot'
				}
				utils.allinpayMethodList(host, data).then((res) => {
					// console.log('加载产品类别', res);
					if (res.rescode === 200) {
						this.moreData = res.resmsg
						this.curMore = res.resmsg.find(item => item.parent === 0)?.id
					}
				});

			},
			/**
			 * 加载热销商品
			 */
			loadShareHot(e) {
				console.log('加载热销商品', e);
				let host = this.sConf.host + '/weapps/product/'
				let token = this.sConf.token
				let data = {
					status: 1,
					is_list: 1,
					is_money: 1,
					is_card: 0,
					ordering: '-hot'
				}
				if (e > 0) {
					data.mode = e
				} else {
					// data.modep = this.curMore
					data.is_share = 1
				}
				uni.showLoading({
					title: '努力加载中'
				})
				utils.authenticatorList(host, token, data).then((res) => {
					console.log('加载热销产品', res);
					// if (res.rescode === 401) {
					// 	uni.reLaunch({
					// 		url: "/pages/login/login"
					// 	})
					// }
					if (res.rescode === 200) {
						this.puctData = res.resmsg
					}
				}).finally(() => {
					uni.hideLoading()
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.template-home {
		height: 100%;
		display: flex;
		flex-direction: column;
	}

	.item-container {
		position: relative;
		width: fit-content;

		display: flex;
		flex-wrap: nowrap;
		padding: 5px 0;

		.scroll-item {
			flex-grow: 1;
			flex-shrink: 0;
			margin: 0rpx 20rpx;
			transition: transform 0.5s ease;

			.empty {
				width: 100rpx;
				height: 100rpx;
				border-radius: 15rpx;
			}

			.mode-title {
				margin-top: 10rpx;
				color: #333333;
			}

			.mode-title-act {
				font-weight: bold;
			}

			.actMore {
				transform: scale(1.1, 1.1);
			}

		}
	}

	.actMode {
		color: #01beff;
		background-color: #f1f1f1;
		border-radius: 15px 0 0 15px;
	}

	.actModeTop {
		color: #01beff;
		background-color: #f1f1f1;
		border-radius: 0 0 0 15px;
	}

	/* 头部栏 */
	.cartHeadBatten {
		background: linear-gradient(to bottom, $uni-color-banner, #f1f1f1);
	}
</style>